<!--
 @description 区域销量分析
 @fileName AreaSalesReport.vue
 @author zengqiongying
 @created 2023/06/03 16:17:35
-->
<template>
  <div>
    <div class="dis-flex search-bar">
      <div class="activePageName"> 区域销量分析  </div>
      <div class="flex-full">
        <el-radio-group v-model="formData.categoryName">
          <el-radio
            v-for="item in categoryList"
            :key="item.dictName"
            :label="item.dictName"
          >{{ item.dictName }}</el-radio>
        </el-radio-group>

        <el-date-picker
          v-model="months"
          type="monthrange"
          value-format="yyyy-MM"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          @change="changeMonth"
        />
      </div>
      <div class="btns">
        <el-button :loading="isExporting" size="mini" type="primary" @click="handleExport">导出数据</el-button>
      </div>
    </div>
    <table-box
      v-loading="isDataLoad"
      :data="tableData"
      :table-config="tableConfig"
      :border="true"
      :show-page="false"
    >
      <el-table-column
        v-for="(prop,i) in tableHeadData"
        :key="i"
        :prop="prop"
        :label="prop"
        :min-width="i<1?100:80"
        :align="i===0?'left':'center'"
        :header-align="i===0?'left':'center'"
      />
    </table-box>
  </div>
</template>
<script>
import { getAreaSalesReport } from '@/api/display/recommendReport'
import SearchMixin from './mixins/Search'
import TableDataMixin from './mixins/TableData'
export default {
  name: 'AreaSalesReport',
  mixins: [SearchMixin, TableDataMixin],
  data() {
    return {
      exportName: '区域销量分析',
      exportUrl: '/api/v1/displaySoftSaleNum/areaSalesReportExport'
    }
  },
  created() {

  },
  methods: {
    async queryTableData() {
      await getAreaSalesReport(this.formData).then(res => {
        const data = res.data
        const headerColumn = data['办事处']
        const rowList = []
        for (const rowIndex in data) {
          // 重置表格行数据 (除月份以外的其他行)
          if (rowIndex !== '办事处') {
            const obj = {
              '办事处': rowIndex
            }
            const row = data[rowIndex]
            headerColumn.forEach((prop, columnIndex) => {
              // 遍历表头，重置表格列数据
              obj[prop] = row[columnIndex]
            })
            rowList.push(obj)
          }
        }
        this.tableHeadData = ['办事处', ...headerColumn]
        this.tableData = rowList
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
